<template>
	<view class="shop">
		<view class="biao plr15">
			<form @submit="formSubmit" @reset="formReset">
				<view class="cu-form-group ">
					<view class="title">商家名称：</view>
					<input v-model="shangjia_name" placeholder="请输入商家名称" type="text" />
				</view>
				<view class="cu-form-group ">
					<view class="title">商家负责人姓名：</view>
					<input v-model="user_name" placeholder="请输入商家负责人姓名" type="text" />
				</view>
				<view class="detail_txt">
					<view class="title">商家LOGO：</view>
					<view class="" style="display: flex;flex-wrap: wrap;">
						<view class="mt10 flex mr10" v-if="logo_pic!=''" style="position: relative;">
							<image :src="logo_pic" mode="" style="width: 160rpx;height: 160rpx;"></image>
							<image src="@/static/imgs/img_del.png" mode=""
								style="width: 36rpx;height: 36rpx;position: absolute;top:6rpx;right: 6rpx;">
							</image>
						</view>
						<view class="upload-box" @click="uploadLogo('logo')">上传图片</view>
					</view>
				</view>
				<view class="detail_txt">
					<view class="title">商家营业执照：</view>
					<view class="" style="display: flex;flex-wrap: wrap;">
						<view class="mt10 flex mr10" v-if="zhizhao!=''" style="position: relative;">
							<image :src="zhizhao" mode="" style="width: 160rpx;height: 160rpx;"></image>
							<image src="@/static/imgs/img_del.png" mode=""
								style="width: 36rpx;height: 36rpx;position: absolute;top:6rpx;right: 6rpx;">
							</image>
						</view>
						<view class="upload-box" @click="uploadLogo('zhizhao')">上传图片</view>
					</view>
				</view>
				<view class="detail_txt">
					<view class="title">商家幻灯片：</view>
					<view class="" style="display: flex;flex-wrap: wrap;">
						<view class="mt10 flex mr10" v-for="(item,index) in desc_pic" v-if="desc_pic!=''"
							@click="previewImage()" style="position: relative;">
							<image :src="item" mode="" style="width: 160rpx;height: 160rpx;"></image>
							<image src="@/static/imgs/img_del.png" mode="" @click.stop="deleteimg(index)"
								style="width: 36rpx;height: 36rpx;position: absolute;top:6rpx;right: 6rpx;">
							</image>
						</view>
						<view class="upload-box" @click="uploadbanner()">上传图片</view>
					</view>
				</view>
				<view class="cu-form-group ">
					<view class="title">商家地址：</view>
					<input v-model="address" placeholder="请输入商家地址" type="text" />
				</view>
				<view class="cu-form-group ">
					<view class="title">商家电话：</view>
					<input v-model="tel" placeholder="请输入商家电话" type="text" />
				</view>
				<!-- 				<view class="cu-form-group ">
					<view class="title">价格描述：</view>
					<input v-model="moneydes" placeholder="请输入价格描述" type="text" />
				</view> -->
				<view class="cu-form-group ">
					<view class="title">商家简介：</view>
				</view>
				<view class="cu-form-group">
					<textarea maxlength="-1" v-model="content" @input="textareacontent"
						placeholder="请输入商家简介"></textarea>
				</view>
				<!-- <view class="biao_05 cu-form-group">
					<view class="title">营业时间：</view>
					<view class="time" >
						<view class="biao_05_2"> 
							<view class="uni-list-cell-db">
								<picker mode="time" :value="time"  @change="bindTimeChange" style="margin-top: 6px;">
									<view class="uni-input">{{time}}</view>
								</picker>
							</view>
						</view>
						<view class="biao_05_2" style="margin: 10upx 10px 0 0;">--</view>
						<view class="uni-list-cell-db">
							<picker mode="time" :value="time_close"  @change="bindTimeChange_close" style="margin-top: 6px;">
								<view class="uni-input">{{time_close}}</view>
							</picker>
						</view>
					</view>
					
				</view>
				<view class="cu-form-group ">
					<view class="title">购买须知：</view>
				</view>
				<view class="cu-form-group">
					<textarea maxlength="-1" :disabled="modalName!=null" @input="textareaAInput" placeholder="请输入购买须知"></textarea>
				</view>
				<view class="cu-form-group ">
					<view class="title">是否营业：</view>
					<view class="title" >
						<switch @change="SwitchA" :class="switchA?'checked':''"  :checked="switchA?true:false" color="#e54d42"></switch> 
					</view>
				</view> -->
				<button form-type="submit">确认保存</button>
			</form>
		</view>
		<view style="height: 80px;"></view>
	</view>
</template>

<script>
	import api from "../../../../common/fxb.js"
	import urlsa from '@/siteinfo.js';
	export default {
		data() {
			return {
				content: "",
				list: [],
				shangjia_name: '',
				input_address: '',
				address: '',
				time: '09:00',
				time_close: '19:00',
				logo_pic: '',
				desc_pic: [],
				showphoto_logo: false,
				id: '',
				tel: '',
				lat: '',
				lon: '',
				moneydes: '',
				user_name: '',
				zhizhao: ''
			};
		},
		onLoad() {
			this.global.request.post({
				data: {
					do: 'shangjia',
					op: 'info'
				},
				success: res => {
					this.info = res
					this.shangjia_name = res.shangjia_name;
					this.logo_pic = res.logo;
					this.desc_pic = res.imgpath.split(',');
					this.address = res.address
					this.tel = res.tel;
					this.content = res.content;
					this.moneydes = res.moneydes
					this.user_name = res.user_name
					this.zhizhao = res.zhizhao
				}
			})
		},

		methods: {
			TimeChange(e) {
				this.time = e.detail.value
			},
			bindTimeChange: function(e) {
				this.time = e.target.value
			},
			bindTimeChange_close: function(e) {
				this.time_close = e.target.value
			},
			textareacontent: function(e) {
				this.content = e.target.value
			},
			//选择位置
			biaozu() {
				const that = this

				//#ifdef MP-WEIXIN 
				uni.getSetting({
					success(res) {
						if (!res.authSetting['scope.userLocation']) {
							uni.authorize({
								scope: 'scope.userLocation',
								success() {
									that.chooseLocation()
									return;
								}
							})
						} else {
							that.chooseLocation()
							return;
						}
					}
				})
				//#endif

				//#ifndef MP-WEIXIN 
				that.chooseLocation()
				//#endif
			},
			chooseLocation() {
				const that = this
				uni.chooseLocation({
					success: function(res) {
						console.log(res)
						that.lat = res.latitude
						that.lon = res.longitude
						that.address = res.name
						var latitude = res.latitude
						var longitude = res.longitude
						api.ApiGet({
							do: 'key',
						}, function(res) {
							var baidu_key = res.data.datas.baidu_key;
							uni.request({
								url: 'https://api.map.baidu.com/reverse_geocoding/v3/?ak=' +
									baidu_key + '&location=' + latitude + ',' + longitude +
									'&output=json&coordtype=wgs84ll',
								data: {},
								header: {
									'Content-Type': 'application/json'
								},
								success: function(res) {
									console.log(res);

									var city = res.data.result.addressComponent.city;
									var province = res.data.result.addressComponent
										.province;
									var district = res.data.result.addressComponent
										.district;
									that.address = city + '-' + province + '-' + district

								}
							})
						})
					}
				});
			},
			//上传LOGO
			uploadLogo(strs) {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					success: res => {
						var token = uni.getStorageSync("token");
						/* 	*/
						uni.uploadFile({
							header: {
								'token': token,
								/* 							"Content-Type": 'application/x-www-form-urlencoded', // 默认值
															'X-TOKEN-PETMALL': '', */
							},
							url: urlsa.siteroot + '/api/Common/upload', //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								if (strs == 'logo') {
									this.logo_pic = JSON.parse(uploadFileRes.data).data.fullurl
								}
								if (strs == 'zhizhao') {
									this.zhizhao = JSON.parse(uploadFileRes.data).data.fullurl
								}

								console.log(this.logo_pic)
								if (this.logo_pic == "") {
									this.showphoto_logo = false
								} else {
									this.showphoto_logo = true
								}
							},
						});
					},
				});

			},
			uploadbanner() {
				var that = this
				that.showphoto = true
				uni.chooseImage({
					count: 3,
					sizeType: ['original', 'compressed'],
					success: res => {
						var token = uni.getStorageSync("token");
						/* 	*/
						for (var i = 0; i < res.tempFilePaths.length; i++) {
							uni.uploadFile({
								header: {
									'token': token,
									/* 							"Content-Type": 'application/x-www-form-urlencoded', // 默认值
																'X-TOKEN-PETMALL': '', */
								},
								url: urlsa.siteroot + '/api/Common/upload', //仅为示例，非真实的接口地址
								filePath: res.tempFilePaths[i],
								name: 'file',
								success: (uploadFileRes) => {
									// this.desc_pic = JSON.parse(uploadFileRes.data).datas
									that.desc_pic.push(JSON.parse(uploadFileRes.data).data.fullurl)
								}
							});
						}

					}
				});
			},
			deleteimg(e) {
				var that = this;
				var index = e;
				that.desc_pic.splice(index, 1);
			},
			deletelogo() {
				this.logo_pic = ""
				this.showphoto = false
			},
			previewImage() {
				uni.previewImage({
					urls: this.desc_pic,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {},
						fail: function(err) {}
					}
				});
			},
			formSubmit: function(e) {
				var formdata = e.detail.value
				if (!this.shangjia_name) {
					uni.showToast({
						title: '请填写店铺名称',
						icon: "none"
					})
					return false
				}
				if (!this.address) {
					uni.showToast({
						title: '请填写店铺地址',
						icon: "none"
					})
					return false
				}
				if (!this.tel) {
					uni.showToast({
						title: '请填写店铺电话',
						icon: "none"
					})
					return false
				} else {
					var reg = new RegExp("^1[3|4|5|7|8|9][0-9]{9}$");
					if (!reg.test(this.tel)) {
						uni.showToast({
							title: "电话号格式不正确",
							icon: "none"
						});
						return;
					}
				}

				this.global.request.post({ //发布接口
					data: {
						do: 'shangjia',
						op: 'editinfo',
						shangjia_name: this.shangjia_name,
						address: this.address,
						tel: this.tel,
						imgpath: this.desc_pic,
						logo: this.logo_pic,
						content: this.content,
						id: uni.getStorageSync("s_id"),
						user_name: this.user_name,
						zhizhao: this.zhizhao
					},
					success: res => {
						uni.showToast({
							title: '保存成功',
						});
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/shangjia/index/index'
							})
						}, 1000);
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.shop {
		background-color: #fff;
		min-height: 100vh;

		.uni-input {
			background-color: #fff;
		}

		.biao span {
			color: #F6996D;
			padding-right: 5px;
		}

		.time {
			display: flex;
			flex-grow: 1;
			font-size: 17px;
		}

		.result {
			margin-top: 12upx;
			font-size: 28upx;
		}
	}

	.cu-form-group {
		border-bottom: 1rpx solid #eee;
		display: flex;
		align-items: center;
		padding: 30rpx 0;
	}

	.detail_txt {
		height: auto;
		background: #fff;
		padding: 20rpx 0;
		overflow: hidden;
		border-bottom: 1rpx solid #eee;
	}

	.detail_txt .title {
		text-align: justify;
		padding-right: 30rpx;
		font-size: 30rpx;
		position: relative;
	}

	button {
		width: 92%;
		background-color: #EB702D;
		color: white;
		position: fixed;
		bottom: 0;
		margin-bottom: 20rpx;
		z-index: 999;
	}

	.upload-box {
		margin-top: 20rpx;
		width: 160rpx;
		height: 160rpx;
		background: #F0F0F0;
		position: relative;
		text-align: center;
		display: flex;
		justify-content: flex-end;
		flex-direction: column;
		padding-bottom: 20rpx;
		box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
	}

	.upload-box::before {
		width: 4rpx;
		height: 40rpx;
	}

	.upload-box::after {
		width: 40rpx;
		height: 4rpx;
	}

	.upload-box::before,
	.upload-box::after {
		content: " ";
		position: absolute;
		top: 38%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #303133;
	}

	input {
		flex: 1;
	}
</style>
